import React from 'react'

import { SearchCon } from '../../http'
import '../../assets/css/SearchCom.css'
class Search extends React.Component {
    constructor() {
        super();
        this.state = {
            hots: [],
            searchText: '',
            isInput: false,
            isSearch: false,
            isClear:false,
            searchSuggest: [],
            searchList:[]
        }
    }
    // 清除输入框
    clearSearchText(){
        this.setState({
            searchText:'',
            isInput:false,
            isSearch:false
        },()=>{
            console.log(this.state.searchText)
        })
    }
    // 绑定输入框数据
    inpChange(e) {
        this.setState({
            searchText: e.target.value,
            isInput: e.target.value ? true : false,
            isSearch: false
        }, () => {
            // 显示搜索推荐
            if(this.state.isInput){
                SearchCon.getSearchSuggest(this.state.searchText, res => {
                    this.setState({
                        searchSuggest: res.data.result.allMatch?res.data.result.allMatch:[]
                    });
                })
            }
        })
    }
    // 推荐搜索
    sugSearch(e) {
        // this.$('#SearchCom .s_inp').val()
        this.setState({
            searchText: e.target.innerText
        },()=>{
            this.goSearch.call(this);
        })
    }

    // 搜索
    goSearch(){
        this.$('.s_list').addClass('animate__animated animate__fadeIn');
        SearchCon.getSearchList(this.state.searchText,res=>{
            this.setState({
                searchList:res.data.result.songs,
                isSearch: true,
                isInput:true
            })
        })
    }
    
    render() {
        return <div key='SearchCom' className='animate__animated' id='SearchCom'>
            <div className='s_box'>
                <input className='s_inp' value={this.state.searchText} onChange={this.inpChange.bind(this)} type='text' placeholder={'搜索歌曲、歌手、专辑'} onKeyUp={(e)=>{if(e.keyCode==13)this.goSearch(e)}}/>
                <span className='clearBtn' style={{display:this.state.isInput?'block':'none'}} onClick={this.clearSearchText.bind(this)}>X</span>
            </div>
            <div className='s_hot' style={{ display: this.state.isInput ? 'none' : 'block' }}>
                <p className='s_hot_tit'>热门搜索</p>
                <ul className='hots_ul'>
                    {
                        this.state.hots.map((item, index) => {
                            return <li onClick={this.sugSearch.bind(this)} key={index}>{item.first}</li>
                        })
                    }
                </ul>
            </div>
            <div className='s_sug' style={{ display: this.state.isInput && !this.state.isSearch ? 'block' : 'none' }}>
                <ul className='s_sug_ul'>
                    <li className='s_sug_tit'  >搜索<span>'{this.state.searchText}'</span></li>
                    {
                        this.state.searchSuggest.map((item, index) => {
                            return <li onClick={this.sugSearch.bind(this)} key={index}>{item.keyword}</li>
                        })
                    }
                </ul>
            </div>

            <div className='s_list' style={{display:this.state.isSearch ? 'block' : 'none' }}>
                <ul className='s_list_ul'>
                    {
                        this.state.searchList.map(item => {
                            return (
                                <li key={item.id} className='songListItem' onClick={this.$play.bind(this,item)}>
                                    <div className='itemCon'>
                                        <span className='songInfo'>
                                            <p className='songName'>{item.name}</p>
                                            <p className='artists'>
                                                {
                                                    item.artists.map((artItem,index) => {
                                                        return <span key={String(item.id)+artItem.id+index}>{artItem.name}</span>
                                                    })
                                                }
                                    -&nbsp;
                                    {
                                                    item.album.name
                                                }
                                            </p>
                                        </span>
                                    </div>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
    }
    componentDidMount() {
        SearchCon.getHotSearch(res => {
            this.setState({
                hots: res.data.result.hots
            })
        })
        this.$('#SearchCom').addClass('animate__fadeIn');
    }
}

export default Search;